<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="">
    <meta http-equiv="x-dns-prefetch-control" content="on">

    <title>注册</title>
    <link href="../../css/css.css" rel="stylesheet" type="text/css">
    <script src="../../js/jquery-v1.11.2.min.js"></script>
    <script src="../../js/driver.js"></script>
    <script src="../../js/common.js"></script>
</head>

<body>
<form id="signForm" action="/driver/regSave.htm">
    <section class="itemgroup p15 mt10">
        <div class="inputarea">
            <label class="inputname">手机号码</label>
            <label class="inputform">
                <i class="iconfont wipe">&#xe614;</i>
                <input class="formstyle w100" type="text" placeholder="请输入手机号码" id="phone" name="phone"/>
            </label>
        </div>
        <div class="inputarea">
            <label class="inputname">验证码</label>
            <label class="inputformcode">
                <img id="imgObj" alt="验证码" src="#" onclick="changeImg()"/>
                <a href="#" onclick="changeImg()">换一张</a>
            </label>
        </div>
        <div class="inputarea">
            <label class="inputname">&nbsp;</label>
            <label class="inputform">
                <i class="iconfont wipe">&#xe614;</i>
                <input class="formstyle w100" type="text" id="code" name="code" placeholder="请输入图片验证码"/>
            </label>
        </div>
        <div class="inputarea">
            <label class="inputname">验证码</label>
            <label class="inputformcode">
                <button type="button" class="right btnkuang_bl checkcodebtn" onclick="getValidateCode()" id="codeTips">
                    获取验证码
                </button>
                <input class="formstyle w100" type="text" placeholder="请输入六位短信验证码" id="smsCode" onkeyup="checkCode()"/>
            </label>
        </div>
        <div class="inputarea">
            <label class="inputname">密码</label>
            <label class="inputform">
                <i class="iconfont wipe">&#xe614;</i>
                <input class="formstyle w100" type="password" placeholder="6-12位密码" id="password" name="password"/>
            </label>
        </div>
        <div class="inputarea">
            <label class="inputname">确认密码</label>
            <label class="inputform">
                <i class="iconfont wipe">&#xe614;</i>
                <input class="formstyle w100" type="password" placeholder="再次确认密码" id="repassword" name="repassword"/>
            </label>
        </div>
        <div class="inputarea">
            <label class="inputname">真实姓名</label>
            <label class="inputform">
                <i class="iconfont wipe">&#xe614;</i>
                <input class="formstyle w100" type="text" placeholder="请输入真实姓名" id="name" name="name"/>
            </label>
        </div>
        <div class="inputarea">
            <label class="inputname">身份证号</label>
            <label class="inputform">
                <i class="iconfont wipe">&#xe614;</i>
                <input class="formstyle w100" type="text" placeholder="请输入身份证号码" id="idCard" name="idCard"/>
            </label>
        </div>
        <div class="inputarea">
            <label class="inputname">驾龄</label>
            <label class="inputform">
                <i class="iconfont wipe">&#xe614;</i>
                <input class="formstyle w100" type="text" placeholder="请输入您的驾龄" id="driverAge" name="driverAge"/>
            </label>
        </div>
    </section>
    <section class="signbtnarea">
        <div class="photoitem font12">
            <label for="gcheckbox" class="gray font14 mr5">
                <input type="checkbox" class="checkbox-g" id="gcheckbox" checked="checked">
                <i class="iconfont checkbox-icon"></i>
            </label>
            已阅读并同意<font class="orange">《用户协议》</font>
        </div>
        <div hidden class="photoitem font12" style="text-align: center" id="errorMessage">
            <label class="gray font14 mr5">
            </label>
            <span style="color:red;" id="errorMessageHtml">您输入的短信验证码有误</span>
        </div>
        <button class="btn bottomonebtn mt10" type="button" id="next" onclick="regSave()">下一步</button>
    </section>
</form>
<script type="text/javascript">
    var uuid = 0;
    $(document).ready(function () {
        var url = _global.serverHost + "/before_validateCode.htm";
        var data = null;
        _callAjaxRequest(url, data, ajaxBack);
        function ajaxBack(data) {
            uuid = data.uuid;
            $("#imgObj").attr("src", _global.serverHost + "/validateCode.htm?code=" + data.verifyCode + "&uuid=" + uuid);
        }
    });

    function regSave() {
        var phone = $("#phone").val();
        if (phone == null || phone == '' || isNaN(phone)) {
            alert("请输入手机号码");
            return false;
        }
        var smsCode = $("#smsCode").val();
        if (smsCode == null || smsCode == '') {
            alert("请输入短信验证码");
            return false;
        }
        var password = $("#password").val();
        if (password == null || password == '') {
            alert("请输入密码");
            return false;
        }
        if (password.length < 6 || password.length > 12) {
            alert("请输入6-12位密码");
            return false;
        }
        var repassword = $("#repassword").val();
        if (repassword == null || repassword == '') {
            alert("请输入确认密码");
            return false;
        }
        if (repassword != password) {
            alert("两次输入密码不一致");
            return false;
        }
        var name = $("#name").val();
        if (name == null || name == '') {
            alert("请输入真实姓名");
            return false;
        }
        var idCard = $("#idCard").val();
        if (idCard == null || idCard == '') {
            alert("请输入身份证号码");
            return false;
        }
        var driverAge = $("#driverAge").val();
        if (driverAge == null || driverAge == '') {
            alert("请输入您的驾龄");
            return false;
        }

        var gcheckbox = $("#gcheckbox").is(':checked');
        if (!gcheckbox) {
            alert("请阅读并同意《用户协议》");
            return false;
        }

        $.ajax({
            cache: true,
            type: "POST",
            url: _global.serverHost + '/driver/regSave.htm',
            data: $('#signForm').serialize(),
            async: false,
            success: function (data) {
                alert(data.message);
                if (data.code == '1') {
                	setCookie("driverUuid", data.driverUuid);
                    window.location.href = "../sign/add_track.html?driverUserId=" + data.driverUserId;
                }
            },
            error: function (request) {
                alert("Connection error");
            }
        });
    }

    function checkCode() {
        var phone = $("#phone").val();
        var smsCode = $("#smsCode").val();

        if (phone == null || phone == '' || smsCode == null || smsCode == '') {
            return false;
        }
        $.ajax({
            type: 'POST',
            url: _global.serverHost + '/smsVerification.htm',
            dataType: "json",
            data: {phone: phone, code: smsCode},
            success: function (data) {
                if (data.code != '1') {
                    $("#errorMessage").show();
                    $("#errorMessageHtml").html(data.message);

                    $("#next").attr("disabled", true);
                } else {
                    $("#errorMessage").hide();
                    $("#next").removeAttr("disabled");
                }
            }
        });
    }

    function getValidateCode() {
        var phone = $("#phone").val();
        if (phone == null || phone == '' || isNaN(phone)) {
            alert("请输入手机号码");
            return false;
        }
        var code = $("#code").val();
        if (code == null || code == '') {
            alert("请输入请输入图片验证码");
            return false;
        }
        $.ajax({
            type: 'POST',
            url: _global.serverHost + '/verification.htm',
            dataType: "json",
            data: {phone: phone, code: code, uuid: uuid},
            success: function (data) {
                alert(data.message);
                if (data.code == '1') {
                    settime();
                } else {
                    changeImg();
                }
            }
        });
    }

    // 刷新图片
    function changeImg() {
        var imgSrc = $("#imgObj");
        var src = imgSrc.attr("src");
        imgSrc.attr("src", changeUrl(src));
    }

    //为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳
    function changeUrl(url) {
        var timestamp = (new Date()).valueOf();
        var index = url.indexOf("?", url);
        if (index > 0) {
            url = url.substring(0, index);
        }
        if ((url.indexOf("&") >= 0)) {
            url = url + "×tamp=" + timestamp;
        } else {
            url = url + "?timestamp=" + timestamp;
        }
        return url + "&uuid=" + uuid;
    }

    var countdown = 60;

    function settime() {
        var obj = $("#codeTips");
        if (countdown == 0) {
            obj.removeAttr("disabled");
            obj.html("免费获取验证码");
            countdown = 60;
            return;
        } else {
            obj.attr("disabled", true);
            obj.html("重新发送(" + countdown + ")");
            countdown--;
        }
        setTimeout(function () {
                    settime(obj)
                }
                , 1000)
    }
</script>
</body>
</html>
